<template>
  <div class="dialog-form">
    <el-button type="primary" @click="_showDialog">打开表单弹窗</el-button>
    <dialog-form v-model="dialogFormVisible" v-if="dialogFormVisible" :formOption="formOption">
      <template slot="map">
        <div class="mapContianer" id="mapContianer"></div>
      </template>
    </dialog-form>
  </div>
</template>

<script>
import dialogForm from "@/components/dialog-form";
import { FORM_ITEM_TYPE } from "@/components/dialog-form/FORM_TYPE";
export default {
  components: { dialogForm },
  data() {
    return {
      dialogFormVisible: false,
      map: null,
      marker: null,
      infoWindow: null,
      dialogOption: {
        title: "", // 头部标题
        width: "80%", // 弹窗宽度
        modal: true, // 是否需要遮罩层
        showClose: true, // 是否显示关闭按钮
      },
      formOption: [
        {
          type: FORM_ITEM_TYPE.INPUT_TEXT,
          prop: "name",
          label: "活动名称",
          itemWidth: 12,
        },
        {
          type: FORM_ITEM_TYPE.SELECT,
          prop: "region",
          label: "活动区域",
          itemWidth: 12,
          selectList: [
            { label: "下拉一", value: 1 },
            { label: "下拉二", value: 2 },
          ],
        },
        {
          type: FORM_ITEM_TYPE.DATE,
          prop: "date",
          label: "活动时间",
        },
        {
          type: FORM_ITEM_TYPE.SWITCH,
          prop: "delivery",
          label: "即时配送",
        },
        {
          type: FORM_ITEM_TYPE.CHECKBOX,
          prop: "type",
          label: "活动性质",
          itemWidth: 12,
          checkList: ["活动性质1", "活动性质2", "活动性质3"],
        },
        {
          type: FORM_ITEM_TYPE.RADIO,
          prop: "resource",
          label: "特殊资源",
          itemWidth: 12,
          radioList: ["特殊资源1", "特殊资源2"],
        },
        {
          type: FORM_ITEM_TYPE.UPLOAD,
          prop: "img",
          label: "图片展示",
          action: "https://jsonplaceholder.typicode.com/posts/",
        },
        {
          type: FORM_ITEM_TYPE.SLOT,
          slotName: "map",
          prop: "map",
          label: "地图插槽",
        },
        {
          type: FORM_ITEM_TYPE.INPUT_TEXTAREA,
          prop: "desc",
          label: "活动形式",
        },
      ],
    };
  },

  created() {},
  mounted() {
    this.initMap();
  },
  watch: {
    dialogFormVisible: {
      handler(val) {
        if (val) {
          this.$nextTick((_) => {
            this.initMap();
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    _showDialog() {
      this.dialogFormVisible = true;
    },
    initMap() {
      let map = new AMap.Map("mapContianer", {
        zoom: 12, //初始化地图层级
        center: [120.356774, 30.306142], //初始化地图中心点
      });
      let marker = new AMap.Marker({
        map,
        clickable: true,
        position: [120.356774, 30.306142],
      });
      let content = `
        <h3 style="fontSize:14px">传智教育黑马程序员训练营</h3>
        <p style="fontSize:12px">地址：杭州市江干区４号大街与文溯南路交叉路口往西约100米(盛泰时代山)</p>
      `;
      let infoWindow = new AMap.InfoWindow({
        content: content,
        offset: new AMap.Pixel(0, -15),
      });
      infoWindow.open(map, [120.356774, 30.306142]);
      marker.on("click", function () {
        infoWindow.open(map, [120.356774, 30.306142]);
      });
      this.map = map;
      this.marker = marker;
      this.infoWindow = infoWindow;
    },
  },
};
</script>

<style scoped lang='less'>
#mapContianer {
  width: 400px;
  height: 200px;
  /deep/.amap-info-content {
    padding: 5px;
    width: 200px;
    h3 {
      line-height: 14px;
      font-size: 14px;
    }
    p {
      line-height: 14px;
      font-size: 12px;
    }
  }
}
.dialog-form {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
</style>
